<template>
    <view>
        <view class="info-mask"></view>
        <view class="info-popup info-popup-middle ">
            <view class="info-top-closebox">
                <view class="info-top-close-btn" @tap="close">
                    <image src="../../static/ibs/img_comm_close.png" mode=""></image>
                </view>
            </view>
            <view class="info-box">
                <image class="info-box-img" src="../../static/ibs/img_comm_payment.png" mode=""></image>
            </view>
            <view class="info-box">
                <view class="info-box-text-30">
                    查看采购意向价格和买家
                </view>
            </view>
            <view class="info-box">
                <view class="info-box-text-16">
                    联系方式需支付{{unreadQuote}}元
                </view>
            </view>
            <wx-form-id :saveData="wxPay" :getFormId="saveFormId" :imgUrl="imgUrl" :imgUrlClass="imgUrlClass"
                        :btnClass="btnClass" :btnSubmitClass="btnSubmitClass" btnName="微信支付"></wx-form-id>
            <!-- 		  <view class="info-btn-box" >


                            <view class="info-btn-box-bg">
                                    <image class="info-btn-box-img" src="../../static/ibs/img_comm_wechat.png" mode=""></image>

                             </view>
                      </view> -->

        </view>


    </view>
</template>

<script>
    import validate from "@/common/graceChecker.js";
    import api from "@/common/api.js";
    import wxFormId from '@/components/wxFromId.vue';

    export default {
        props: ['demandInfo', 'remoteUrl', 'unreadQuote'],
        components: {
            wxFormId
        },
        data() {
            return {
                btnClass: ['page-userinfo-btn-box'],
                btnSubmitClass: ['page-userinfo-btn-submit-box'],
                imgUrl: '../../static/ibs/img_comm_wechat.png',
                imgUrlClass: ['info-btn-box-img']
            };
        },
        methods: {
            close() {
                this.$emit('closeInfo', 'payBox');
            },
            saveFormId(e) {
                let that = this;
                that.commonSaveFormId(e)//保存表单FormId
            },
            //发起微信支付
            wxPay() {
                var that = this;
                that.wxPayment(that.demandInfo.id).then(res => {
                    var orderPayId = res.orderPayId;
                   	uni.showLoading({
                          title: '支付中...'
                    }); 
                    setTimeout(function () {
                        uni.hideLoading();
                        var url = "/wechat/demand/demandInfo?demandId=" + that.demandInfo.id + "&&orderPayId=" + orderPayId;   //请求地址
                        api.httpRequest(url, null, "post",true).then((res) => {
							res.result.id=that.demandInfo.id;
                            that.$parent.paySuccessInfo = res.result;
                            that.$parent.isShowpaySuccessBox = true;
                            that.$parent.isShowpayBox = false;
                        });
                    }, 3000);
                });
            },
        }
    }
</script>
<style>
    .info-mask {
        position: fixed;
        z-index: 998;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .5);
    }

    .info-popup {
        position: absolute;
        z-index: 999;
        background-color: #ffffff;
        box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
    }

    .info-popup-middle {
        width: 560upx;
        height: 540upx;
        border-radius: 8upx;
        top: 50%;
        left: 50%;
        position: fixed;
        overflow: hidden;
        transform: translate(-50%, -50%);
    }

    .info-top-closebox {
        height: 56upx;
        width: 100%;
    }

    .info-top-close-btn {
        padding-right: 20upx;
        padding-top: 20upx;
        display: flex;
        justify-content: flex-end;
    }

    .info-top-close-btn image {
        width: 36upx;
        height: 36upx;
    }

    .info-box {
        display: flex;
        justify-content: center;
        font-size: 32upx;
        color: #1A1A1A;
    }

    .info-box-img {
        width: 104upx;
        height: 104upx;
    }

    .info-box-text-16 {
        padding-top: 16upx;
    }

    .info-box-text-30 {
        padding-top: 30upx;
    }

    .info-btn-box {
        margin-top: 60upx;
        display: flex;
        justify-content: center;
        color: #FFFFFF;
        font-size: 34upx;
    }

    .info-btn-box-bg {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 460upx;
        background: #077131;
        height: 88upx;
        line-height: 88upx;
        border-radius: 44upx;
        text-align: center;
    }

    .info-btn-box-img {
        width: 36upx;
        height: 36upx;
        padding-right: 10upx;
    }

    .page-userinfo-btn-box button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 460upx;
        background: #077131;
        height: 88upx;
        line-height: 188upx;
        border-radius: 44upx;
        color: #FFFFFF;
        text-align: center;
    }

    .page-userinfo-btn-submit-box {
        text-align: center;
        height: 68rpx;
        /* width:156rpx; */
        position: fixed;
        margin-top: 60rpx;
        left: 0;
        right: 0;

    }
</style>
